@duration: 1s;
@w: 130px;
@w_c: 30px;
.circle {
  position: absolute;
  left: 50%;
  border-radius: @w;
  background: #000;
  animation-duration: @duration;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: paused;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &.active {
    .dot1,
    .dot2,
    .dot3 {
      animation-play-state: running;
    }
  }
}
.viewBox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: @w;
  height: @w;
}

.dot1 {
  .circle;
  background: #949b7c;
  width: @w_c;
  height: @w_c;
  top: 0;
  margin-left: 0px - @w_c * 0.5;
  animation-name: g_ani;
  animation-timing-function: cubic-bezier(1, 0.3, 1, 1);
}
.dot2 {
  .circle;
  background: #90a580;
  width: @w_c * 2;
  height: @w_c * 2;
  bottom: 10%;
  margin-left: 0px - @w_c;
  animation-name: y_ani;
  animation-delay: @duration;
}
.dot3 {
  .circle;
  background: #98a470;
  width: @w_c * 2;
  height: @w_c * 2;
  bottom: 10%;
  margin-left: 0px - @w_c;
  animation-name: k_ani;
}

@keyframes g_ani {
  0% {
    transform: translate(0px, 0px) scale(0.4);
    opacity: 0;
  }
  20% {
    transform: translate(0px, 0px) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(0px, 50px) scale(1);
    opacity: 1;
  }
}
@keyframes y_ani {
  0% {
    transform: scaleX(1) scaleY(1);
  }
  5% {
    transform: scaleX(0.6) scaleY(1.4);
  }
  15% {
    transform: scaleX(1.2) scaleY(0.8);
  }
  25% {
    transform: scaleX(0.9) scaleY(1.1);
  }
  35% {
    transform: scaleX(1) scaleY(1);
  }
  100% {
    transform: scaleX(1) scaleY(1);
  }
}
@keyframes k_ani {
  0% {
    transform: translate(0px, 0px) scale(0.6);
  }
  5% {
    transform: translate(0px, -10px) scale(0.6);
  }
  10% {
    transform: translate(0px, -5px) scale(0.6);
  }
  100% {
    transform: translate(0px, 0px) scale(0.6);
  }
}
